<template>
  <el-echarts theme="green" :option="option"></el-echarts>
</template>
<script>
import { EchartsLinearGradient } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    addressCode: String,
    startTime: String,
    endTime: String,
  },
  data() {
    return {
      api: '/industrial/pc/product/region/Analysis/',
      option: null,
    }
  },
  computed: {
    orgAddress() {
      return this.addressCode || this.$store.getters.org.addressCode || '520000000000'
    },
    url() {
      return `${this.api}?addressCode=${this.orgAddress}&startTime=${
        this.startTime || ''
      }&endTime=${this.endTime || ''}`
    },
  },
  watch: {
    addressCode() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      let [res, err] = await this.$utils.promise(this.$http.get(this.url))
      if (err) return

      const data = res.data

      const chartData = {
        title: '区域性品牌分析',
        subtext:
          '在所属行政区划中，与同级地区比较，分析产业所占比例，查看该地区是否有重点突出的产业。所占比例越大，表示越有可能发展成为区域性品牌',
        categoryData: [],
        seriesBar: [],
        seriesShadow: [],
      }

      for (let i = 0; i < data.length; i++) {
        chartData.categoryData.push(data[i].productName)
        chartData.seriesBar.push(data[i].proportion ? data[i].proportion.replace(/%/g, '') : 0)
        chartData.seriesShadow.push(100)
      }

      this.option = {
        title: {
          text: chartData.title,
          subtext: chartData.subtext,
          subtextStyle: {
            color: '#333',
          },
        },
        tooltip: {
          show: true,
          formatter: '{b}：{c}%',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          y: 80,
          y2: 10,
        },
        xAxis: {
          type: 'value',
          position: 'top',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: '#999',
            },
          },
        },
        yAxis: {
          type: 'category',
          data: chartData.categoryData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        // dataZoom: [{
        //   type: 'inside',
        //   orient: 'vertical'
        // }],
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new EchartsLinearGradient(1, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#FFFA00',
                  },
                  {
                    offset: 1,
                    color: '#FF0000',
                  },
                ]),
              },
              emphasis: {
                color: new EchartsLinearGradient(1, 1, 0, 0, [
                  {
                    offset: 0,
                    color: '#AAA600',
                  },
                  {
                    offset: 1,
                    color: '#AA0000',
                  },
                ]),
              },
            },
            data: chartData.seriesBar,
          },
          {
            // For shadow
            type: 'bar',
            itemStyle: {
              normal: {
                color: 'rgba(0,0,0,0.05)',
              },
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: chartData.seriesShadow,
            animation: false,
            tooltip: {
              show: false,
            },
          },
        ],
      }
    },
  },
}
</script>
<style scoped></style>
